<!-- 朋友的详细的信息展示-->
<template>
  <!--  里面展示用户的基本信息-->
  <div class="app1">
    <!--    指定一个小盒子 , 里面展示用户的昵称 , 头像 信息-->
    <div class="box1">
      <div class="name">
        <p>{{ friend.name == null ? '' : friend.name }}</p>
      </div>
      <div id="txiang">
        <el-avatar shape="square" :size="100" :src="friend.url==null?'':friend.url">头像</el-avatar>
      </div>
    </div>
    <!--    指定一个容器 , 来使用表单的方法来指定用户的备注 , 微信号 等等 , 信息-->
    <div class="box2">
      <tr>
        <td class="td1">备 注</td>
        <td class="left">{{ friend.name == null ? '' : friend.name }}</td>
      </tr>
      <tr>
        <td class="td1">地 区</td>
        <td class="left">河南 周口</td>
      </tr>
      <tr>
        <td class="td1">账 号</td>
        <td class="left">{{ friend.id == null ? '' : friend.id }}</td>
      </tr>
      <tr>
        <td class="td1">来 源</td>
        <td class="left">通过搜索账号添加</td>
      </tr>
    </div>
    <!--    定义两个按钮 , 来删除好友 , 或者发送消息-->
    <div class="box3">
      <div class="but1">
        <el-button type="success" @click="sendConversation(friend.id)">发送 消息</el-button>
      </div>
      <div class="but1">
        <el-popover
          placement="top"
          width="160"
          v-model="visible">
          <p>确定要删除 {{ friend.name == null ? '' : friend.name }} 吗?</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取 消</el-button>
            <el-button type="primary" size="mini" @click="delfriend">确 定</el-button>
          </div>
          <el-button type="danger" slot="reference">删除 好友</el-button>
        </el-popover>
      </div>
    </div>
  </div>

</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "DetailsFriends",
  data() {
    return {
      visible: false,
    }
  },
  props: {
    friend: {}
  },
  //函数
  methods: {
    //  删除好友的函数 , 用于 删除用户
    delfriend() {
      // 向服务端 , 发送一个请求 , 删除指定的用户 ,
      this.$store
        .dispatch("user/deleteFriend", this.friend.id == null ? '' : this.friend.id)
        .then(() => {
          //用户删除成功 , 则删除用户
          this.$message({message: '好友删除,成功!', type: 'success'});
          this.visible = true;
          return true;
        })
        .catch((error) => {
          console.log("用户删除失败" + error);
        })


    },
    //  调用发送消息的 , 按钮 , 来跳转到聊天页面 ,并判断 , 客户端 , 是否保存此会话 , 如果包含会话 , 则直接跳转 , , 如果不包含会话 , 则创建会话 , 再进行跳转
    sendConversation(friendid) {
      //  先判断 , 当前用户与此用户 , 是否已经存在会话
      for (var i = 0; i < this.conversation.length; i++) {
        //  判断每一个会话 , 是否包含此用户 , 如果包含 , 则说明是已经存在会话了
        if (this.conversation[i].fromid == friendid || this.conversation[i].toid == friendid) {
          //跳转路由 , 跳转到聊天页面 , 进行聊天
          this.$router.push({path: '/WeChat/WeChat'})
          return;
        }
      }
      //  循环完毕 , 没有找到 , 则表示 , 该用户 , 不存在该用户的会话,  则向服务端发送请求 , 保存会话
      this.$store.dispatch("message/addConverSation", this.friend.id).then(() => {
        console.log("会话 , 添加成功:");
        //  跳转路由
        this.$router.push({path: '/WeChat/WeChat'})
        return;
      }).catch(err => {
        console.log(err);
      })
    }
  },
  //  计算属性
  computed: {
    // 引入当前用户的账号 , 和所有的会话 , 进行判断
    ...mapGetters(['id', 'conversation']),
  }
}
</script>

<style scoped>
.but1 {
  /*  指定行内快块元素*/
  display: inline-block;
  padding-left: 50px;
}

.box3 {
  /*  指定上边距*/
  padding-top: 50px;
}

.box2 td {
  /*  设置字体 , 靠左*/
  text-align: left;
}

.box2 {
  padding-top: 30px;
  margin-top: 20px;
  /*  指定上边框*/
  border-top: 1px solid #b0b0b0;
  height: 210px;
  border-bottom: 1px solid #b0b0b0;
}

.left {
  /*  设置左外边距*/
  padding-left: 50px;
  padding-bottom: 10px;
  font-family: 微软雅黑;
}

/*设置上边距*/
.td1 {
  /*  设置上边距*/
  padding-top: 10px;
  /*设置字体的颜色*/
  color: #999999;

}

.app1 {
  width: 380px;
  height: 380px;
  /*使用div居中 , 并且指定高度*/
  margin: 100px auto;
}

/*指定第一个盒子的布局*/
.box1 {
  height: 100px;
  /*  指定下边距*/
  padding-bottom: 20px;
}

/*指定图片 , 向右移动*/
#txiang {
  display: inline-block;
  padding-left: 150px;

}

/*指定第一个盒子的name属性的布局*/
.name {
  display: inline-block;
  font-size: 20px;
  font-weight: 400;
  position: relative;
  top: -30px;
  font-family: 微软雅黑;
}
</style>
